<template>
  <template v-if="user">
  <van-cell title="头像" center to="/user/edit" value="内容" class="custom-cell">
    <van-image
      round
      width="6rem"
      height="6rem"
      :src="user.avatar"
      class="custom-image"
    />
  </van-cell>
  <van-cell title="昵称" @click="toEdit('username', '昵称' ,user.username)" :value="user.username" is-link to="/user/edit"/>
  <van-cell title="账号" :value="user.account"/>
  
  <van-cell title="性别" is-link arrow-direction="right" @click="toEdit('gender', '性别' ,user.gender)" :value="user.gender"/>
  <van-cell title="手机号" is-link @click="toEdit('phone', '手机号' ,user.phone)" to="/user/edit" :value="user.phone" />
  <van-cell title="电子邮箱" is-link @click="toEdit('email', '电子邮箱' ,user.email)" to="/user/edit" :value="user.email" />
  <van-cell title="注册时间" :value='user.createTime'/>
  </template>
</template>


<script setup lang="ts">
import { useRouter } from 'vue-router';
import MyAxios from "../plugins/MyAxios.ts"
import {onMounted, ref} from "vue";
import {showToast} from "vant";
import {getCurrentUser} from "../service/user.ts";

const user = ref();

onMounted( async () => {
  user.value = await getCurrentUser()
  console.log(user.value)
})

const router = useRouter();
// 点击编辑方法
const toEdit = (editKey: string , editName: string , currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue
    }
  })
  console.log(editKey, currentValue)
}

</script>

<style scoped>

</style>